<script lang="ts" setup>
import type { FormSubmitEvent } from "#ui/types";

defineProps<{
  onSubmit: (event: FormSubmitEvent<LoginSchema>) => void
}>()
// TODO: 控制提交的类型在 Comp 还是Page?

const loginForm = ref<LoginSchema>({
  email: "",
  password: "",
});
const loginOptions = ref({
  remember: false,
  autoLogin: false,
});
</script>

<template>
  <UCard class="shadow-sm *:mt-2 hover:shadow-xl transition-shadow">
    <UForm
      :schema="loginSchema"
      :state="loginForm"
      class="space-y-4 w-[240px]"
      @submit="onSubmit"
    >
      <UFormGroup label="邮箱" name="email">
        <UInput v-model="loginForm.email" placeholder="邮箱" />
      </UFormGroup>

      <UFormGroup label="密码" name="password">
        <UInput
          v-model="loginForm.password"
          type="password"
          autocomplete="current-password"
          placeholder="密码"
        />
      </UFormGroup>
      <!-- TODO修改密码 -->

      <!-- <div class="px-2">
        <button class="underline" @click="() => { console.log('todo') }">
          忘记密码<UIcon name="i-heroicons-arrow-right-20-solid" class="w-5 h-5" />
        </button>
      </div> -->
      <div class="flex flex-row justify-between">
        <UCheckbox v-model="loginOptions.remember">
          <template #label>
            <span :class="loginOptions.remember && 'font-semibold'">记住我</span>
          </template>
        </UCheckbox>
        <UCheckbox v-model="loginOptions.autoLogin">
          <template #label>
            <span :class="loginOptions.autoLogin && 'font-semibold'">自动登录</span>
          </template>
        </UCheckbox>
      </div>
      <UButton type="submit" class="w-full justify-center">
        提交
      </UButton>
    </UForm>
  </UCard>
</template>

<style scoped>

</style>
